<template>
    <div class="detail">
      <div class="title">
        <div class="item-top">
          <span class="avator"><img src="~@/assets/logo.png" alt=""></span><span>Besideyou</span>
        </div>
        <div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        <div class="content-img">
          <div class="img-item" v-for="item in 2" :key="item">
            <img src="~@/assets/logo.png" alt="">
          </div>
        </div>
      </div>
      <div class="platform">
        <div class="platform-top">
          <strong>平台回复</strong>
        </div>
        <div class="platform-reply">
          <span class="flag">平台&nbsp;:</span><span class="replay-text">您好，您的宠物价值为0，请重新上传您好，您的宠物价值为0，请重新上传您好，您的宠物价值为0，请重新上传您好，您的宠物价值为0，请重新上传您好，您的宠物价值为0，请重新上传您好，您的宠物价值为0，请重新上传 <span class="btn-replay">回复</span></span>

        </div>
        <div class="user-reply">
          <span class="flag">用户&nbsp;:</span><span>您好，我的宠物价值为10000元，谢谢</span>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
          return {}
        },
        created() {
          console.log(this.$route.meta.title)
          this.$store.commit("setTitle", this.$route.meta.title)
        }
    }
</script>

<style scoped lang="scss">
  .detail{
    .content{
      margin-top: 10px;
      padding: 0 16px;
      font-size: 14px;
    }
    .content-img{
      padding: 0 16px;
      text-align: center;
    }
    .platform{
        padding-bottom: 15px;
      .platform-top{
        height: 40px;
        width: 100%;
        background: #f6f6f6;
        strong{
          display: inline-block;
          padding: 0 16px;
          text-align: center;
          line-height: 40px;
          height: 40px;
          color:#fff;
          background: #3479DF;
        }
      }
      .platform-reply{
        background: #eee;
        margin-top: 2px;
        padding: 10px 10px 10px;
        .flag{
          display: inline-block;
          margin-right: 10px;
          background: #3479DF;
          height: 22px;
          line-height: 22px;
          color: #fff;
          width: 42px;
          text-align: center;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;
          font-size: 12px;
        }
        .replay-text{
          font-size: 13px;
          line-height: 24px;
        }
        .btn-replay{
          display: inline-block;
          float: right;
          margin-left: 10px;
          background: #3479DF;
          color: #fff;
          font-size: 12px;
          width: 34px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          border-radius: 4px;
        }
      }
      .user-reply{
        background: #eee;
        margin-top: 2px;
        padding: 10px 10px 10px;
        .flag{
          display: inline-block;
          width: 42px;
          height: 22px;
          line-height: 22px;
          text-align: center;
          font-size: 12px;
          margin-right: 10px;
          background: #f60;
          color: #fff;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;
        }
      }
    }
  }
  .item-top{
    margin: 6px auto 0;
    padding: 0 16px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
    span{
      display: inline-block;
      vertical-align: middle;
      &:first-child{
        height: 36px;
        width: 36px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden;
        background: #eee;
      }
      &:last-child{
        margin-left: 10px;
        font-size: 14px;
        font-weight: 600;
      }
      img{
        height: 36px;
        width: 36px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
      }
    }
  }
</style>
